<nav class="flex w-full px-4 navbar navbar-expand-lg navbar-light bg-light">
  <div>
    <a
      class="navbar-brand"
      target="_blank"
      href="https://jsverse.gitbook.io/transloco/"
    >
      <img height="50px" appSrc="assets/images/logo.svg" />
    </a>
    <button
      class="navbar-toggler"
      type="button"
      data-bs-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>

  <div id="navbarSupportedContent" class="flex-1 collapse navbar-collapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item" routerLinkActive="active">
        <a
          class="nav-link"
          routerLink="home"
          data-bs-target="#navbarSupportedContent"
          >Home</a
        >
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a
          class="nav-link"
          routerLink="lazy"
          data-bs-target="#navbarSupportedContent"
          >Lazy</a
        >
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a
          class="nav-link"
          routerLink="scope-sharing"
          data-bs-target="#navbarSupportedContent"
          >Scope Sharing</a
        >
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a
          class="nav-link"
          routerLink="inline-loaders"
          data-bs-target="#navbarSupportedContent"
          >Inline Loaders</a
        >
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a
          class="nav-link"
          routerLink="dynamic-translation"
          data-bs-target="#navbarSupportedContent"
          >Dynamic Translation</a
        >
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a
          class="nav-link"
          routerLink="multi-langs"
          data-bs-target="#navbarSupportedContent"
          >Multi Langs</a
        >
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a
          class="nav-link"
          routerLink="transpilers"
          data-bs-target="#navbarSupportedContent"
          >Transpilers</a
        >
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a
          class="nav-link"
          routerLink="locale"
          data-bs-target="#navbarSupportedContent"
          >Locale</a
        >
      </li>
    </ul>
  </div>

  <div class="flex gap-2">
    <a href="https://jsverse.gitbook.io/transloco/" class="inline-block btn"
      >📖</a
    >
    @for (lang of availableLangs; track lang; let last = $last) {
      <button
        class="btn my-2 my-sm-0"
        [attr.data-cy]="lang.id"
        (click)="changeLang(lang.id)"
        [class.btn-primary]="activeLang === lang.id"
        [class.btn-secondary]="activeLang !== lang.id"
      >
        {{ lang.label }}
      </button>
    }
  </div>
</nav>

<main class="p-4">
  <router-outlet />
</main>
